<template>
  <a-modal :title="formTile + '数据字典子项'" :visible="true" width="50%" :footer="null" @cancel="reset">
    <div class="main">
      <a-card>
        <a-row type="flex" justify="start" align="top">
          <a-col :span="24">
            <a-form :form="form" @submit="handleSubmit" :labelCol="formItemLayout.labelCol"
              :wrapperCol="formItemLayout.wrapperCol">
              <a-form-item label="序号" :required="true">
                <a-input-number allow-clear style="width:150px" :min="1" placeholder="请输入序号" v-decorator="[`seq`,{validateTrigger: ['change', 'blur'],rules: [{required: true,message: '请输入序号'}]}]" />
              </a-form-item>

              <a-form-item label="名称" :required="true">
                <a-input allow-clear placeholder="请输入名称" :maxLength="40" v-decorator="[`name`,{validateTrigger: ['change', 'blur'],rules: [{required: true,whitespace: true,message: '请输入名称'}]}]" />
              </a-form-item>
              <a-form-item label="编码">
                <a-input allow-clear placeholder="请输入编码" :maxLength="40" :disabled="disabled" v-decorator="[`code`,{validateTrigger: ['change', 'blur'],}]" />
              </a-form-item>
              <a-form-item label="缩写">
                <a-textarea allow-clear placeholder="请输入" :maxLength="40" v-decorator="[`abbr`,{validateTrigger: ['change', 'blur'],}]" >
                </a-textarea>
              </a-form-item>
              <a-form-item label="外部编号">
                <a-textarea allow-clear placeholder="请输入" :maxLength="40" v-decorator="[`outCode`,{validateTrigger: ['change', 'blur'],}]" >
                </a-textarea>
              </a-form-item>
              <a-form-item label="扩展属性1">
                <a-textarea allow-clear placeholder="请输入" :maxLength="40" v-decorator="[`extendAttr1`,{validateTrigger: ['change', 'blur'],}]" >
                </a-textarea>
              </a-form-item>
              <a-row>
                <a-col :span="16" :offset="8" class="info-action">
                  <a-button type="primary" @click="reset">返回</a-button>
                  <a-button type="primary" class="ml-20" html-type="submit" :loading="loading">保存</a-button>
                </a-col>
              </a-row>
            </a-form>
          </a-col>
        </a-row>
      </a-card>
    </div>

  </a-modal>
</template>

<script>
import { getDictList, detailCreate, detailUpdate, getDictChildList } from '@api/rd/index'

export default {
  components: {},

  props: {
    detail: {
      type: Object,
      default: null
    },
    type: {
      type: Number,
      default: null
    }
  },

  data() {
    return {
      id: '',
      parentList: [],
      childList: [],
      groupName: '',

      loading: false,
      idEdit: false,
      dictId: '',
      parentId: undefined,
      dictName: undefined,
      disabled: false,
      form: this.$form.createForm(this),
      formItemLayout: {
        labelCol: {
          xl: { span: 5 },
          xs: { span: 5 },
          sm: { span: 6 }
        },
        wrapperCol: {
          xl: { span: 17 },
          xs: { span: 16 },
          sm: { span: 16 }
        }
      }
    }
  },
  computed: {
    userInfo() {
      return this.$store.getters.userInfo || null
    }
  },
  created() {
    let pathname = window.location.pathname;
    const newArr = pathname.split('/')
    this.groupName = newArr[3]
    const { detail, type } = this.$props
    if (type == 2) {
      this.formTile = '编辑'
      this.id = detail.id
      this.dictId = detail.dictId
      this.idEdit = true

      // if (detail.dictName) {
      //   this.dictName = detail.dictName
      //   this.loadDetail(this.dictName)
      // }
      this.disabled = true
      this.$nextTick(() => {
        this.form.setFieldsValue({ name: detail.name, seq: detail.seq, code: detail.code,extendAttr1:detail.extendAttr1,outCode:detail.outCode,abbr:detail.abbr })
        // if (detail.dictName) {
        //   this.parentId = Number(detail.parentId)
        // }
      })
    } else {
      this.formTile = '新增'
      this.dictId = detail.id
    }
    this.loadData()
  },
  methods: {
    reset() {
      this.form.resetFields()
      this.$emit('closeDetail')
    },
    selectChange(values) {
      this.parentId = undefined
      this.loadDetail(values)
    },
    handleSubmit(e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          this.submit(values)
        }
      })
    },
    async loadDetail(name) {
      this.loadingChild = true
      const params = {
        current: 1,
        // size: this.pagination.pageSize,
        name: name
      }
      try {
        const res = await getDictChildList('dict', params)
        if (res.code == 200) {
          this.childList = res.data
        } else {
          this.$message.error(res.msg)
        }
      } catch (error) {
        this.$message.error('获取数据字典子项列表失败！')
      } finally {
        this.loadingChild = false
      }
    },
    async loadData() {
      const params = {
        current: 1,
        size: 100,
        groupName: this.groupName
      }
      try {
        const res = await getDictList('dict', params)
        if (res.code == 200) {
          this.parentList = res.data.records
        } else {
          this.$message.error(res.msg)
        }
      } catch (error) {
        this.$message.error('获取数据字典列表失败！')
      }
    },
    async submit(values) {
      this.loading = true
      var params = values
      const { realname } = this.userInfo
      params.operator = realname
      params.dictId = this.dictId
      // if (this.parentId) {
      //   params.parentId = this.parentId
      // }
      if (this.id) {
        params.id = this.id
      }
      try {
        const res = this.idEdit ? await detailUpdate('dict', params) : await detailCreate('dict', params)
        if (res.code == 200) {
          this.$message.success(this.idEdit ? '修改数据字典子项成功！' : '新建数据字典子项成功！')
          this.reset()
        } else {
          this.$message.warning(res.msg)
        }
      } catch (error) {
        this.$message.warning('操作失败！')
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

<style scoped lang="less">
.info-action {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  // margin-bottom: 20px;
}

.ml-20 {
  margin-left: 20px;
}
</style>
